<template>
  <div class="bs-page-main user-login-bg">
    <div class="user-login-main">
      <div class="logo"><img src="/data/pic/WOOWJI.png" alt="woowji" /></div>
      <div class="user-main-box">
        <div class="tit">
          <h6>Register</h6>
        </div>
        <div class="ipt-box">
          <div class="lb">Email</div>
          <div class="ipt">
            <form autocomplete="off">
              <input
                type="text"
                v-model="userName"
                placeholder="ENTER YOUR Email ADDRESS"
              />
            </form>
          </div>
        </div>
        <div class="ipt-box">
          <div class="lb">PASSWORD</div>
          <div class="ipt">
            <form autocomplete="off">
              <input
                :type="showPassword ? 'text' : 'password'"
                v-model="password"
                placeholder="ENTER YOUR PASSWORD"
              />
            </form>
            <a
              href="javascript:"
              :class="showPassword ? 'show cur' : 'show'"
              @click="showPassword = !showPassword"
            ></a>
          </div>
        </div>
        <div class="btns">
          <a href="javascript:" class="login">Register</a>
        </div>
        <div class="policy">
          <a href="javascript:" @click="agreePolicy = !agreePolicy"
            ><i :class="agreePolicy && 'cur'"></i>I agree to the Privacy Policy
            and Terms_of Service</a
          >
          <a href="javascript:" @click="agreeReceive = !agreeReceive"
            ><i :class="agreeReceive && 'cur'"></i>Sign me up for emails to
            receive updates, exclusive deals,and more.</a
          >
        </div>
        <div class="tips">
          <router-link to="/user/login">Go To Sign In</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      password: "",
      loading: true,
      showPassword: false,
      agreePolicy: true,
      agreeReceive: true,
    };
  },
};
</script>
